<template>
	<div class="cms-template-container">
		<el-dialog title="修改模板" v-model="isShowDialog" :fullscreen="true" :show-close="false">
			<template #header>
				<div style="display: flex; flex-direction: row; justify-content: space-between;">
					<h2>修改模板</h2>
					<span class="dialog-header">
						<el-button @click="onCancel">关 闭</el-button>
						<el-button type="primary" @click="onSubmit">保 存</el-button>
					</span>
				</div>
			</template>
			<el-form ref="editTemplateFormRef" :model="formData" :rules="formRules" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item label="模板名称" prop="name">
							<el-input v-model="formData.name" :readonly="true" placeholder="请输入模板名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item label="平台类型" prop="catalog">
							<el-select v-model="formData.catalog" placeholder="请选择平台类型" clearable class="w100">
								<el-option label="桌面端" :value="1"></el-option>
								<el-option label="移动端" :value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item label="模板状态" prop="status">
							<el-select v-model="formData.status" placeholder="请选择模板状态" clearable class="w100">
								<el-option label="正常" value="0"></el-option>
								<el-option label="停用" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6">
						<el-form-item label="主题背景" prop="theme">
							<el-select v-model="codemirror.options.theme" placeholder="请选择编辑器主题" clearable class="w100">
							<el-option label="blackboard" value="blackboard"></el-option>
							<el-option label="idea" value="idea"></el-option>
							<el-option label="material" value="material"></el-option>
							<el-option label="night" value="night"></el-option>
							</el-select>
						</el-form-item>	
					</el-col>
					<el-col>
						<el-form-item label="模板备注" prop="remark">
							<el-input type="textarea" v-model="formData.remark" placeholder="请输入模板备注" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col class="mb10">
						<el-button v-auths="['cms:document:add', 'cms:document:edit']" type="primary" link icon="el-icon-edit" @click="onSubmit">保存</el-button>
						<el-button type="primary" link icon="el-icon-view" @click="isShowDrawer = true">素材</el-button>
						<el-button type="primary" link icon="el-icon-copy-document" @click="onCopyTemplate">复制</el-button>
						<el-button type="primary" link icon="el-icon-document-delete" @click="onCleanTemplate">清空</el-button>
						<el-button type="primary" link icon="el-icon-help" @click="isShowHelper = true">帮助</el-button>
					</el-col>
					<el-col>
						<Codemirror ref="codemirrorRef" v-model:value="formData.template" :options="codemirror.options" border/>
					</el-col>
				</el-row>
			</el-form>
			<el-drawer title="素材资源" v-model="isShowDrawer" direction="rtl">
				<Material ref="materialRef" :size="24" :model="formData"></Material>
			</el-drawer>
			<el-drawer title="帮助文档" v-model="isShowHelper" direction="rtl">
				<el-card>
					<DfcmsHelp></DfcmsHelp>
				</el-card>
			</el-drawer>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { copyText } from '/@/utils/commonFunction';
import Codemirror from "codemirror-editor-vue3";
import 'codemirror/theme/blackboard.css';
import 'codemirror/theme/idea.css';
import 'codemirror/theme/material.css';
import 'codemirror/theme/night.css';
import "codemirror/mode/htmlembedded/htmlembedded.js";

import Material from '/@/views/cms/material/index.vue';
import DfcmsHelp from '/@/views/cms/help/index.vue';
import { getTemplate, editTemplate } from '/@/api/cms/channel/template/index';

export default {
	name: 'cms/template/edit',
	components: { Codemirror, Material, DfcmsHelp },
	setup(props, context) {
		const editTemplateFormRef = ref();
		const codemirrorRef = ref();
		const state = reactive({
			isShowDialog: false,
			isShowDrawer: false,
			isShowHelper: false,
			templates: [],
			formData: {},
			formRules : {
				name : { required: true, message: '模板名称不能为空', trigger: 'blur' },
				catalog: { required: true, message: '模板类型不能为空', trigger: 'change' },
				status: { required: true, message: '模板状态不能为空', trigger: 'change' },
				template: { required: true, message: '模板模板不能为空', trigger: 'blur' },
			},
			codemirror: {
				options: {
					theme: 'idea',
					mode: "htmlembedded",
					line: true,
					lineWrapping: true,
					lineNumbers: true, // 是否在编辑器左侧显示行号
					matchBrackets: true, // 括号匹配
					styleActiveLine: true ,// 光标行高亮
					extraKeys:{"Ctrl-Space":"autocomplete"},
					gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
				}
			}
		});
		
		// 打开弹窗
		const openDialog = (row?: object) => {
			if(row){
				state.isShowDialog = true;
				getTemplate({id: row.id}).then((res: any) => {
					if(res.code === 0){
						state.formData = res.data;
					}
				})
			}
			document.onkeydown = (e) => bindKeyboard(e);
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			document.onkeydown = null;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			editTemplateFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			editTemplateFormRef.value.validate(valid => {
				if(valid){
					let params = {
						id: state.formData.id,
						siteId: state.formData.siteId,
						channelId: state.formData.channelId,
						name: state.formData.name,
						catalog: state.formData.catalog,
						type: state.formData.type,
						status: state.formData.status,
						remark: state.formData.remark,
						template: state.formData.template,
					}
					editTemplate(params).then((res) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							context.emit('submit');
						}
					});
				}
			});
		};
		const onCopyTemplate = () => {
			copyText(state.formData.template);
		}
		const onCleanTemplate = () => {
			state.formData.template = '';
		}
		const bindKeyboard = (e: any) => {
			let keyCode = e.keyCode || e.which || e.charCode;
			//Ctrl+S
			if(e.ctrlKey && keyCode == 83){
				e.preventDefault();
				onSubmit();
			}
		}
		
		return {
			editTemplateFormRef,
			codemirrorRef,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			onCopyTemplate,
			onCleanTemplate,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
.cms-template-container{
	:deep .el-dialog__body{
		max-height: calc(100vh) !important;
	}
	:deep .cms-material-container .flex-warp .flex-warp-item {
		height: 100px;
	}
}
</style>